<!--  -->
<template>
  <a-card :bordered="false">
    <s-table
      ref="table"
      rowKey="id"
      :columns="$auth('SYSTEM.SYSTEM_DATA_LIST') ? columns : []"
      bordered
      :data="loadData"
    >
      <span slot="systemId" slot-scope="text, record">
        <template>
          {{ record.systemId | filtersState }}
        </template>
      </span>

      <a-table
        rowKey="id"
        slot="expandedRowRender"
        slot-scope="record"
        :columns="innerColumns"
        :data-source="record.list"
        :pagination="false"
      >
        <template slot="operation" slot-scope="text, item">
          <a-space>
            <a
              v-if="!$auth('SYSTEM.SYSTEM_DATA_EDIT') && $auth('SYSTEM.SYSTEM_DATA_DETAIL')"
              @click="clickEdit(record, item, false)"
            >{{ $t('all.autotext1187') }}</a>
            <a v-if="$auth('SYSTEM.SYSTEM_DATA_EDIT')" @click="clickEdit(record, item, true)">{{ $t('all.autotext1343') }}</a>
          </a-space>
        </template>
      </a-table>
    </s-table>

    <a-modal
      :visible="visible"
      :title="$t('all.autotext1343')"
      :confirmLoading="confirmLoading"
      @cancel="() => { visible = false }"
      @ok="handleSubmit"
    >
      <div>
        <a-checkbox-group
          v-model="checkedList"
          :options="plainOptions"
          @change="onChange"
          :disabled="!isEdit"
        />
      </div>
    </a-modal>
  </a-card>
</template>

<script>

import { getDataPermissionList, updateDataPermission } from '@/api/system/data-pms'
import { buildPaginationObj } from '@/components/Table'

export default {
  name: '',
  components: {

  },
  filters: {
    filtersState (val) {
      if (val === 1) {
        return 'payment'
      } else if (val === 2) {
        return 'consent'
      } else if (val === 3) {
        return 'source'
      } else if (val === 4) {
        return 'payment ' + this.$t('all.autotext1317')
      } else if (val === 5) {
        return 'consent ' + this.$t('all.autotext1317')
      } else if (val === 6) {
        return 'source ' + this.$t('all.autotext1317')
      }
    }
  },
  data () {
    return {
      queryParam: {},
      columns: [
        {
          title: this.$t('all.autotext61'),
          dataIndex: 'systemId',
          scopedSlots: { customRender: 'systemId' }
        },
        {
          title: this.$t('all.autotext974') + ' code',
          dataIndex: 'code'
        },
        {
          title: this.$t('all.autotext1071'),
          dataIndex: 'name'
        },
        {
          title: this.$t('all.autotext983'),
          dataIndex: 'remark'
        }
      ],
      innerColumns: [
        {
          title: this.$t('all.autotext1124') + ' code',
          dataIndex: 'pmsCode'
        },
        {
          title: this.$t('all.autotext296'),
          dataIndex: 'pmsName'
        },
        {
          title: this.$t('all.autotext187'),
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      loadData: parameter => {
        if (this.$auth('SYSTEM.SYSTEM_DATA_LIST')) {
          return getDataPermissionList(Object.assign(parameter, this.queryParam)).then(res => {
            return buildPaginationObj(res)
          })
        } else {
          return Promise.resolve(buildPaginationObj([]))
        }
      },
      visible: false,
      plainOptions: [],
      checkedList: [],
      confirmLoading: false,
      editInfo: null,
      isEdit: false
    }
  },
  created () {

  },
  methods: {
    handleSubmit () {
      const param = {
        id: this.editInfo.id,
        dictionaryCode: this.checkedList.join(',')
      }
      this.confirmLoading = true
      updateDataPermission(param).then(res => {
        this.confirmLoading = false
        this.$message.success(this.$t('all.autotext1316'))
        this.$refs.table.refresh(true)
        this.visible = false
      }).catch(() => {
        this.confirmLoading = false
      })
    },
    clickEdit (record, item, flag) {
      // this.checkedList
      this.plainOptions = record.dictionaryList.map(item => {
        return {
          label: item.metaName,
          value: item.metaCode
        }
      })
      this.checkedList = item.dictionaryCode.split(',')
      this.editInfo = item
      this.visible = true
      this.isEdit = flag
    },
    onChange (e) {
      console.log('#########', e)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
